import {Util,GridMixin} from "@lowcode/jpaas-common-lib";
import FormCustomQueryApi from "@/api/form/core/formCustomQuery";
import ChartCondition from "./ChartCondition";
import vuedraggable from "vuedraggable";
import CustomChartJs from "@/views/modules/form/core/FormChartComponent/CustomChartJs";

const ChartDef = {
    data() {
        return {
            gaugeRowKeys: [],
            publishComponent: [],
            listParamsDef:[],
            constantField:[],
            compomentParamsDef: [],
            selectPublish:[],
            //维度拖拽的父级子级的id
            parentId:'',
            childrenId:'',
            //度量拖拽的父级子级的id
            MrParentId:'',
            MrChildrenId:'',
            //删除维度id
            dimensionId:null,
            //删除度量设置id
            measuresId:null,
            measuresIdParent:null,
            //删除 颜色图例Id
            colorLegendId:null,
            //删除 过滤Id
            filterId:null,
            //拖入纬度设置删除
            latitude:null
        }
    },
    components: {
        vuedraggable
    },
    mixins: [GridMixin],
    computed: {
        gaugeRowSelection() {
            return {
                selectedRowKeys: this.gaugeRowKeys,
                onChange: this.gaugeColourChange,
            }
        },
    },
    created() {
        this.loadConstants();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"ChartDef",key);
        },
        loadConstants() {
            FormCustomQueryApi.getConstants().then((data) => {
                this.constantField = this.constantField.concat(
                    data.map((item) => {
                        return { label: item.val, value: item.key }
                    })
                )
            })
        },
        gaugeColourChange(selectedRowKeys) {
            this.gaugeRowKeys = selectedRowKeys
        },

        addGaugeColour() {
            this.config.gaugeColours.push({ idx_: Util.randomId(), percent: 0, colour: '#3fb1e3' })
        },
        gaugeColourUp() {
            this.toUp(this.config.gaugeColours, this.gaugeRowKeys)
        },
        gaugeColourDown() {
            this.toDown(this.config.gaugeColours, this.gaugeRowKeys)
        },
        gaugeColourRemove() {
            this.removeRows(this.config.gaugeColours, this.gaugeRowKeys)
        },
        //鼠标移上去显示删除维度设置
        dimensionsen(index,type,idx){
            if(type =='measures'){
                this.measuresId = index;
                this.measuresIdParent = idx;
            } else if(type =='colorLegend') {
                this.colorLegendId = index;
            }else if(type =='dimensions'){
                this.dimensionId = index;
            }else if(type =='filterParams'){
                this.filterId=index
            }else  if(type =='latitude'){
                this.latitude =index;
            }
        },
        dimensioneleave(name,type){
            if(type =='measures'){
                this.measuresId = name;
            }else if(type =='colorLegend') {
                this.colorLegendId = name;
            }else if(type =='dimensions'){
                this.dimensionId = name;
            } else if(type =='filterParams'){
                this.filterId = name;
            }else  if(type =='latitude'){
                this.latitude = name
            }
        },
        //维度@度量删除
        dimensiondelete(index,type){
            if(type =='dimensions'){
                this.config.dimensions.splice(index,1);
            }
            else if(type =='colorLegend') {
                this.config.colorLegends.splice(index,1);
            }
            else if(type =='measures') {
                this.config.measures.splice(index,1);
            }else if(type =='filterParams') {
                this.config.filterParams.splice(index,1);
            }
        },
        measureListDelete(index,index1){
            this.config.measureList[index].splice(index1,1);
        },
        changeComponent(val) {
            if(!val){
                this.config.receive.mapping=[];
                return;
            }
            if (this.config.alias == val) {
                if( this.config.mapType && this.config.reportType=='map'){
                    this.config.mapTypeConf.component = '';
                }else {
                    this.config.receive.publishComponent = ''
                }
                this.$notification.warning({ message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.$ti18('msa.notSelSel','发布事件组件不能选择自己!','ChartDef') })
                return
            }
            this.compomentParamsDef = this.getPubParams(val)
        },

        //条件设置
        setCondition(filterParam){
            var conf = {
                component: ChartCondition,
                title: this.$ti18('conditionTitle','搜索条件配置','ChartDef'),
                curVm: this,
                data: {filterParam:filterParam},
                widthHeight: ['800px', '600px'],
                zIndex:99999,
            };
            Util.open(conf, function (action,condition) {
                if (action != 'ok') {
                    return;
                }
                filterParam.condition=condition;
            });
        },
        up(index,type){
            var rows=[];
            if(type =='dimensions'){
                rows=this.config.dimensions;
            }
            else if(type =='colorLegend') {
                rows=this.config.colorLegends;
            }
            else if(type =='measures') {
                rows=this.config.measures;
            }else if(type =='filterParams') {
                rows=this.config.filterParams;
            }
            this.toUp(rows,index);
        },
        down(index,type){
            var rows=[];
            if(type =='dimensions'){
                rows=this.config.dimensions;
            }
            else if(type =='colorLegend') {
                rows=this.config.colorLegends;
            }
            else if(type =='measures') {
                rows=this.config.measures;
            }else if(type =='filterParams') {
                rows=this.config.filterParams;
            }
            this.toDown(rows,index);
        },
        toUp(rows,index){
            if(rows.length<=1 || index==0){
                return;
            }
            rows[index-1] = rows.splice(index, 1, rows[index-1])[0];
        },
        toDown(rows,index){
            if(rows.length<=1 || index==rows.length-1){
                return;
            }
            rows[index+1] = rows.splice(index, 1, rows[index+1])[0];
        },
        editCustomChart(){
            var self=this;
            var conf = {
                component: CustomChartJs,
                data: {
                    config: this.config,
                },
                curVm: this,
                zIndex:10000,
                max:true,
                title: self.i18n('customConfTitle','自定义图表配置')
            }
            Util.open(conf, function (action, jsScript) {
                if (action != 'ok') return;
                self.$set(self.config, "jsScript", jsScript);
                self.$emit('dragclick', self.config, self.index, self.type);
            });
        }
    }

}

export default ChartDef;